<template>
  <main class="h-drawer">
    <a-drawer
      v-model:visible="drawerVisible"
      :title="title"
      width="400"
      :closable="false"
      :footer-style="{ textAlign: 'right' }"
      @close="onClose"
    >
      <slot name="content"></slot>
      <template #footer>
        <slot name="submit"></slot>
        <a-button style="margin-right: 8px" @click="onClose">取消</a-button>
      </template>
    </a-drawer>
  </main>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits, toRefs } from "vue";
const props = defineProps({
  drawerVisible: Boolean,
  title: String,
});
const { drawerVisible, title } = toRefs(props);

const emit = defineEmits(["update:drawerVisible"]);

const onClose = () => {
  emit("update:drawerVisible", false);
};
// 向父组件暴露方法
defineExpose();
</script>

<style scoped>
</style>